<template>

  <div class="container">
    <quest-check
    ref="checkchek"
    @seach="seach"
    @clear="clear" />
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="全部" name="first" />
      <el-tab-pane label="待审核" name="second" />
      <el-tab-pane label="已审核" name="third" />
      <el-tab-pane label="已拒绝" name="fourth" />
    </el-tabs>
    <select-list
    :counts="counts"
    :table-data="tableData"
    @requestData="requestData"
    @goToTheShelf="goToTheShelf"
    @delet="delet" />
    <questions-pagination
      ref="pagination"
      :total="counts"
      :query-obj="query"
      @query="queryFn"
    />
  </div>
</template>

<script>
import QuestCheck from '../components/questions-checkbox'
import SelectList from '../components/questions-check'
import QuestionsPagination from '../components/questions-pagination.vue'
import { choice, choicePublish, remove } from '@/api/hmmm/questions'

export default {
  components: {
    QuestCheck,
    SelectList,
    QuestionsPagination
  },
  data () {
    return {
      tableData: [],
      activeName: 'first',
      query: {
        page: 1,
        pagesize: 5,
        chkState: null
      },
      counts: 0,
      formData: {}
    }
  },
  created () {
    this.choiceFn()
  },
  methods: {
    queryFn (query) {
      this.query = { ...query, ...this.formData, chkState: this.query.chkState }
      this.choiceFn()
    },
    async seach (subjectID) {
      if (this.$refs.checkchek.formData.keyword) {
        const res = await choice({
          keyword: this.$refs.checkchek.formData.keyword,
          page: this.query.page,
          pagesize: this.query.pagesize
        })
        this.tableData = res.data.items
        this.counts = res.data.items.length
      } else {
        const res = await choice({
          subjectID: subjectID,
          page: this.query.page,
          pagesize: this.query.pagesize
        })
        this.tableData = res.data.items
        this.counts = res.data.items.length
      }
    },
    clear () {
      this.formData = this.$options.data().formData
      // this.query = this.$options.data().query
      this.choiceFn()
    },
    handleClick () {
      if (this.activeName === 'second') {
        // console.log(this.activeName)
        this.query.chkState = 0
      } else if (this.activeName === 'third') {
        // console.log(this.activeName)
        this.query.chkState = 1
      } else if (this.activeName === 'fourth') {
        // console.log(this.activeName)
        this.query.chkState = 2
      } else {
        this.query.chkState = null
      }
      this.query = { page: this.$options.data().query.page, pagesize: this.$options.data().query.pagesize, chkState: this.query.chkState, ...this.formData }
      this.choiceFn()
    },
    async delet (row) {
      // console.log(row)
      try {
        await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        const res = await remove(row)
        console.log(res)

        this.choiceFn()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      } catch (error) {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      }
    },
    async goToTheShelf (row) {
      try {
        if (row.publishState === 0) {
          await this.$confirm('您确定要上架这道题目么?', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
        } else {
          await this.$confirm('您确定要下架这道题目么?', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
        }
        if (row.publishState === 1) {
          row.publishState = 0
        } else {
          row.publishState = 1
        }
        await choicePublish(row)
        this.$message({
          type: 'success',
          message: row.publishState === 1 ? '上架成功!' : '下架成功!'
        })
        this.choiceFn()
      } catch (error) {
        this.$message({
          type: 'info',
          message: row.publishState === 1 ? '取消下架!' : '取消上架!'
        })
      }
    },
    requestData () {
      this.choiceFn()
    },
    async choiceFn () {
      const res = await choice(this.query)
      // console.log(res)
      this.tableData = res.data.items
      // console.log(this.tableData)
      this.counts = res.data.counts
      // console.log(this.counts)
      //
    }
  }
}
</script>

<style scoped>
.container{
  position: relative;
  padding-left: 30px;
}
select-list{
  position: absolute;
  left: 0;
  top:0;
  right:0;
  bottom:0;
}
</style>
